/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View} from 'react-native';
import { Tabs, Icon, Button, Toast  } from 'antd-mobile-rn';
import SplashScreen from 'react-native-splash-screen';

// project
import {Page, Content, Svg, Text, Label, Image, ScrollX, ScrollY, ItemX, ItemY, Row, Header, Footer, Float, Wrap, Touch, Hand, ButtonOpacity, ButtonLight, TouchOpacity, TouchLight} from '../../../library'
import {Icon1} from '../../../preset';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class OpenDoor extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props){
		super(props)

		/**
		 * state
		 */
		this.state = {
			// 页面tab切换
			tabs:[
				{title:'小区门禁'},
				{title:'楼宇门'}
			]
		}

    }

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	/**
	 * 一键开门
	 */
	open(){
		Toast.loading('正在开门',5)
	}

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {
		const style = {
			borderBottomColor:'#26c75e',
			borderBottomWidth:3,
		}
		return (
			<Page>

				<Content my='40' bg='#efeff4'>
					<View>

						{/* 页面tab切换 */}
						<Tabs 
							tabs={this.state.tabs} 
							tabBarUnderlineStyle={style} 
							tabBarActiveTextColor='#26c75e'
							tabBarTextStyle={{ size:16 }}
						>
							{/* 小区门禁 */}
							<View style={{backgroundColor:'#fff',marginLeft:30,marginRight:30,marginTop:30,borderTopRightRadius:5,borderTopLeftRadius:5}}>
								<View style={{padding:15}}>
									<Row>
										<Text color='#d5d2db'>请您保持在门禁5米内的位置</Text>
									</Row>

									{/* 选择小区 */}
									<Row mt='30' mb='8' bb='1 #f0f0f0' pb='8'>
										<Hand f='2' y='center'>
											<Image source={require('../../../assets/location.png')} w='16' h='16'/>
											<Text size='16'> 保定珑城花园小区</Text>
										</Hand>
										<Hand f='1' x='right' y='center' >
											<Icon type='right' size='16' color='#aaa'></Icon>
										</Hand>
									</Row>
								</View>

								{/* 一键开门按钮 */}
								<View style={{ marginTop:10 }}>
									<ButtonOpacity bg='#21ac43' ra='0' h='50' onClick={this.open}><Text size="16" bold color='#fff'>一键开门</Text></ButtonOpacity>
								</View>
							</View>

							{/* 楼宇门 */}
							<Hand x='center' mt='20'><Text>暂未开启此功能</Text></Hand>
						</Tabs>

					</View>
				</Content>
				
                {/* 头部 */}
				<Header h='40' bg='#fff' px='10'></Header>

				{/* 底部 */}
				<Footer bg='#fff'></Footer>

			</Page>
		);
	}
}
